<template>
  <div>
    <!-- 选择 时间格式 HH:ss -->
    <el-time-picker
      ref="TimePicker"
      v-if="type === 'TimePicker'"
      v-model="currentValue"
      class="date-box"
      :format="format.format"
      :value-format="format.valueformat"
      :placeholder="label"
      @input="onInputEvent"
    >
    </el-time-picker>
    <!-- 选择日期格式  2020-10-10 -->
    <el-date-picker
      ref="date"
      v-else-if="type === 'date'"
      v-model="currentValue"
      :picker-options="pickerOptions"
      :format="format.format"
      :value-format="format.valueformat"
      :type="type"
      :placeholder="label"
      @input="onInputEvent"
    />
    <!-- 选择 时间 时间段  HH:ss - HH:ss -->
    <el-time-picker
      v-if="type === 'rangeTime'"
      is-range
      :format="format.format"
      :value-format="format.valueformat"
      v-model="currentValue"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围"
      @input="onInputEvent"
    >
    </el-time-picker>
    <!-- 选择日期 时间段  2020-10-10 - 2020-10-10 -->
    <el-date-picker
      v-if="type === 'daterange'"
      v-model="currentValue"
      :picker-options="pickerOptions"
      :value-format="format"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :placeholder="label"
      @input="onInputEvent"
    />
     <el-date-picker
      v-else
      v-model="currentValue"
      :picker-options="pickerOptions"
      :value-format="format"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :placeholder="label"
      @input="onInputEvent"
    />
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['label', 'name', 'value', 'format', 'date', 'pickerOptions', 'type', 'range'],
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = this.value
    }
  },
  methods: {
    chackReturnData(value) {
      if (this.type === 'date') {
        this.$emit('input', this.name, value)
      } else if (this.type === 'TimePicker') {
        this.$emit('input', this.name, value)
      } else if (this.type === 'rangeTime') {
        this.$emit('input', this.date.startTime, value ? value[0] : null)
        this.$emit('input', this.date.entTime, value ? value[1] : null)
        this.$emit('input', this.name, [value[0], value[1]])
      }else {
        this.$emit('input', this.date[0], value ? value[0] : null)
        this.$emit('input', this.date[1], value ? value[1] : null)
        this.$emit('input', this.name, [value[0], value[1]])
      }
    },
    onInputEvent(value) {
      // console.log(value)
      this.chackReturnData(value)
    }
  }
}
</script>
